<template>
  <div>
    <el-row>

      <!-- 封面 -->
      <el-col :span="6" style="margin-left: 5px;">
        <img :src="article.cover" style="height: 150px;" />
      </el-col>

      <el-col :span="17">
        <div style="text-align: left;">
          <!-- 标题 -->
          <el-row>
            <el-link @click="title('/home/article-subject')" style="font-size: 120%;">
              {{article.title}}
            </el-link>
          </el-row>

          <!-- 缩略内容 -->
          <el-row style="margin-top: 10px;">
            <div style="font-size: small;">
              <!-- 截断文章内容，并过滤其中的html字符 -->
              {{article.content.substring(0,210).replace(/<[^<>]+>/g,'')+"..."}}
            </div>
          </el-row>

          <!-- 相关信息 -->
          <el-row style="margin-top: 15px;" :gutter="10">
            <!-- 前半段 -->
            <el-col :span="12">
              <div>
                <el-tag v-for="tag,index in article.tags" :key="index">
                  {{tag}}
                </el-tag>
                <el-tag style="margin-left: 2px;">{{article.createTime}}</el-tag>
              </div>
            </el-col>

            <el-col :span="11">
              <div style="text-align: right; ">
                <el-button size="small" icon="el-icon-thumb" v-if="!like" @click="toggleLike">
                  {{article.likeNum}}
                </el-button>
                <el-button size="small" type="primary" v-else @click="toggleLike">
                  <svg t="1613453047698" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="2823" width="11" height="11">
                    <path d="M310.388364 99.165091 310.388364 99.165091c20.619636 0 41.378909 2.699636 61.579636 7.982545 39.354182 10.402909 76.520727 29.975273 110.475636 58.112l29.602909 24.552727 29.672727-24.459636c34.420364-28.346182 71.447273-47.941818 109.800727-58.135273 20.270545-5.236364 41.029818-7.866182 61.696-7.866182 25.297455 0 50.827636 3.956364 75.333818 11.613091 40.471273 13.149091 78.661818 36.212364 109.847273 66.117818 30.254545 30.021818 53.341091 67.118545 66.769455 107.240727l2.722909 7.959273c12.125091 41.565091 12.753455 82.920727 1.722182 123.392-11.008 41.704727-34.746182 82.408727-68.770909 117.922909l-2.234182 1.559273-2.839273 2.839273L512.139636 921.157818 126.464 536.203636c-35.770182-35.746909-60.672-77.428364-72.145455-120.925091-11.659636-42.728727-10.193455-86.900364 4.212364-130.932364 13.381818-39.819636 36.933818-77.032727 67.933091-107.403636 31.511273-30.580364 69.236364-53.341091 109.381818-65.954909C260.235636 103.144727 285.323636 99.165091 310.388364 99.165091M310.365091 52.619636c-29.090909 0-58.903273 4.445091-88.762182 14.056727-48.128 15.104-92.229818 42.589091-127.534545 76.869818-35.746909 35.025455-63.720727 78.615273-79.639273 125.998545-17.850182 54.434909-18.618182 108.125091-5.003636 157.998545C23.272727 480.186182 52.736 528.337455 93.579636 569.134545l390.609455 389.864727c7.912727 8.285091 18.059636 12.381091 28.136727 12.381091 9.821091 0 19.572364-3.909818 27.042909-11.636364l389.329455-388.840727 2.513455-1.768727c40.075636-40.797091 69.538909-88.948364 83.432727-141.614545 13.591273-49.896727 12.823273-103.563636-5.050182-157.998545l-0.279273 0c-15.872-47.383273-43.101091-90.717091-78.103273-125.486545-36.258909-34.792727-80.128-61.719273-128.256-77.358545-30.161455-9.402182-60.253091-13.870545-89.716364-13.870545-24.971636 0-49.501091 3.211636-73.309091 9.332364-46.382545 12.334545-89.227636 35.514182-127.767273 67.281455C473.832727 97.652364 430.498909 74.472727 383.860364 62.138182 360.168727 55.924364 335.522909 52.619636 310.365091 52.619636L310.365091 52.619636z"
                      p-id="2824" fill="#d81e06"></path>
                  </svg>
                  {{article.likeNum}}
                </el-button>
                <el-tag>
                  <i class="el-icon-view"></i>
                  {{article.lookNum}}
                </el-tag>
                <el-tag>
                  <i class="el-icon-chat-line-round"></i>
                  {{article.review}}
                </el-tag>
              </div>
            </el-col>


          </el-row>
        </div>
      </el-col>
    </el-row>



    <hr />
  </div>
</template>

<script>
  import {
    like,
    unlike
  } from '@/api/Article.js'

  export default {
    props: ['article'],
    data() {
      return {
        like: false
      }
    },
    methods: {
      title(path) {
        var that = this
        var state = this.$store.state
        this.$store.commit({
          type: 'set',
          article: that.article
        })
        this.$router.push(path + '/' + that.article.id)
        window.scrollTo(0, 0)
      },

      toggleLike() {
        // 判断用户是否登录，未登录则直接跳转登录页面
        if (this.$store.state.user == undefined) {
          this.$router.push({
            path: '/login',
            query: {
              redirect: this.$route.path
            }
          })
          return
        }

        this.like = !this.like
        if (this.like == true) {
          like(this.article.id).then(resp => {
            this.$message({
              message: '点赞成功',
              type: 'success'
            });
          }).catch(error => {
            this.$message.error('点赞失败，请稍后重试');
          })
          this.article.likeNum++
        } else {
          unlike(this.article.id).then(resp => {
            this.$message({
              message: '取消点赞成功',
              type: 'success'
            });
          }).catch(error => {
            this.$message.error('取消点赞失败，请稍后重试');
          })
          this.article.likeNum--
        }
      }
    }
  }
</script>

<style>
  el-tag {
    opacity: 0.6;
  }
</style>
